<template>
    <div class="intelligence scroll">
        <div class="pagecontent">
            <div class="top">
                <div class="top1">
                    <div class="rect"><span>{{userInfo.sstUserTruename}}</span></div>
                    <div class="pic">
                        <div class="useravatar">
                            <img :src="userInfo.userAvatar?userInfo.userAvatar:headError" :onerror="headError">
                        </div>
                    </div>
                </div>
                <div class="top2">
                    <div class="rect"><span>{{userInfo.userScore}}</span></div>
                    <div class="pic"></div>
                </div>
                <div class="top3">
                    <div class="rect" @click="visable=1"><span>{{gradelist[choseGrade].gradename}}</span></div>
                    <div class="pic" @click="visable=1"></div>
                </div>
            </div>
            <div class="gamecontent">
                <div class="item clearfix" v-for="(item,index) in roomList" :key="index">
                    <div class="name"><span>{{item.responderName}}</span></div>
                    <div class="numofmen">参与人数：{{item.userCount}}</div>
                    <div class="start" @click="startGame(item.responderId)"></div>
                </div>
            </div>
        </div>

        <Gradechose :gradeList="this.gradelist" :isvisable="visable" @changeVisable="changeVisable" :choseindex="choseGrade" @changeIndex="changeIndex"></Gradechose>
    </div>
</template>

<script>
import * as api from '@/api/index';
export default {
    data(){
        return{
            userInfo:JSON.parse(localStorage.getItem("userInfo")),
            choseGrade:0,
            visable:0,
            gradelist:[
                {gradename:"一年级",grade:'1'},
                {gradename:"二年级",grade:'2'},
                {gradename:"三年级",grade:'3'},
                {gradename:"四年级",grade:'4'},
                {gradename:"五年级",grade:'5'},
                {gradename:"六年级",grade:'6'},
            ],
            userName:'',
            userScore:'',
            roomList:[],
            headError: this.$store.state.headError2,
        }
    },
    watch:{
        choseGrade(){
            this.getRoomList()
        }
    },
    created(){
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
    },
    mounted(){
        this.getUserInfo()
        this.getRoomList()
    },
    methods:{
        goBack(){
			window.removeEventListener('popstate', this.goBack, false);
			this.$router.push({path:'/preliminary'})
		},
        async getUserInfo(){
			var data = {
				userId: this.userInfo.userId
			}
			var res = await api.getUserInfo(data)
			if(res.resultCode == 1){
                this.userInfo=res.value
				localStorage.setItem("userInfo",JSON.stringify(res.value));				
			}
		},
        startGame(roomId){
            this.$router.push({path:'/pkawait',query:{roomid:roomId}})
        },
        changeVisable(val){
            this.visable=!val;
        },
        changeIndex(val){
            this.choseGrade=val;
            this.visable=0
        },
        async getRoomList(){
            var data={
                grade:this.choseGrade+1,
                subject:1
            }
            var res=await api.GetRoomList(data)
            if(res.resultCode==1){
                this.roomList=res.value?res.value:[]
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.intelligence{
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/pk/pkbg.png) no-repeat;
    background-size: 100% 100%;
    .pagecontent{
        width: 100%;
        height: auto;
        overflow: hidden;
        min-height: 100%;
        .top{
            width: 100%;
            height: 1rem;
            position: relative;
            .top1{
                margin-left: .3rem;
                width: 2.46rem;
                height: 100%;
                position: relative;
                display: inline-block;
                .rect{
                    position: absolute;
                    width: 2.18rem;
                    height: .64rem;
                    left: .28rem;
                    top: .34rem;
                    background: #343bbe;
                    border-radius: .32rem;
                    color: #ffffff;
                    font-size: .3rem;
                    line-height: .64rem;
                    text-align: center;
                    padding-left: .35rem;
                    span{
                        display: inline-block;
                        max-width: 1.5rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                .pic{
                    position: absolute;
                    left: 0;
                    top: .16rem;
                    width: .82rem;
                    height: .84rem;
                    background: url(~@/assets/img/pk/head.png) no-repeat;
                    background-size: 100% 100%;
                    .useravatar{
                        position: absolute;
                        top: .044rem;
                        left: .1rem;
                        width: .62rem;
                        height: .62rem;
                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                            border-radius: 50% 50%;
                        }
                    }
                }
            }
            .top2{
                margin-left: .15rem;
                width: 2rem;
                height: 100%;
                position: relative;
                display: inline-block;
                .rect{
                    position: absolute;
                    width: 2rem;
                    height: .64rem;
                    left: 0;
                    top: .34rem;
                    background: #343bbe;
                    border-radius: .32rem;
                    color: #ffffff;
                    font-size: .3rem;
                    line-height: .64rem;
                    text-align: center;
                    padding-left: .35rem;
                    span{
                        display: inline-block;
                        max-width: 1.5rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                .pic{
                    position: absolute;
                    left: 0;
                    top: .34rem;
                    width: .6rem;
                    height: .64rem;
                    background: url(~@/assets/img/pk/coin.gif) no-repeat;
                    background-size: 100% 100%;
                }
            }
            .top3{
                margin-left: .15rem;
                width: 2.15rem;
                height: 100%;
                position: relative;
                display: inline-block;
                .rect{
                    position: absolute;
                    width: 2.14rem;
                    height: .64rem;
                    left: 0;
                    top: .34rem;
                    background: #343bbe;
                    border-radius: .32rem;
                    color: #ffffff;
                    font-size: .3rem;
                    line-height: .64rem;
                    text-align: center;
                    padding-right: .3rem;
                    span{
                        display: inline-block;
                        max-width: 1.5rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                .pic{
                    position: absolute;
                    left: 1.64rem;
                    top: .57rem;
                    width: .26rem;
                    height: .18rem;
                    background: url(~@/assets/img/pk/arrow.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
        }

        .gamecontent{
            width: 100%;
            height: auto;
            padding-top: .57rem;
            .item{
                position: relative;
                width: 3.2rem;
                height: 2.81rem;
                background:url(~@/assets/img/pk/ansbtn.png) no-repeat;
                background-size: 100% 100%;
                float: left;
                margin:0 .05rem .5rem .35rem;
                text-align: center;
                .name{
                    margin: .18rem auto 0;
                    width: 2.44rem;
                    height: 1.2rem;
                    color: #ffffff;
                    font-size: .4rem;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    span{
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                }
                .numofmen{
                    font-size: .26rem;
                    color: #666666;
                    margin-top: .18rem;
                }
                .start{
                    width: 2.1rem;
                    height: .8rem;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}
</style>
